<template>
   <Todoinput @add="addTodo"></Todoinput>
   <Todolist :data="newData" 
   @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount"
   :completedCount="completedCount"  :activeCount="activeCount"></Todolist >
</template>
<script setup>
import Todoinput from './todoinput.vue';
import Todolist from './todolist.vue';
import {ref,computed} from "vue"

let data = ref([
    {
        id:1,
        todo:'吃',
        isCompleted:false
    },
    {
        id:2,
        todo:'世界杯',
        isCompleted:false
    },
])
// 增加todo
let addTodo = (input) =>{
    console.log(input);

    // 声明一个对象再push
    let obj = {
        id:Math.random().toString(32).substring(2),
        todo:input,
        isCompleted:false
    }
    data.value.push(obj)
}

// 删除todo
let delTodo = input =>{
    console.log(input);
    data.value.splice(input,1)
}

// 接受筛选的字段

let filterFlag = ref("all")

let handleGetFlag = flag =>{
    console.log(flag);
    filterFlag.value = flag
}

// 声明三个响应式变量，根据计算属性来进行赋值操作
let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)


// 处理数据
let newData = computed(()=>{
    
    let all = data.value //全部的数据

    let completed = data.value.filter(item=>item.
     isCompleted);

    let active = data.value.filter(item=>!item.
    isCompleted).length

    allCount.value = all.length;

    completedCount.value =  completed.length;

    activeCount.value = active.length


    switch(filterFlag.value){
        case "all":
            return all
        case "completed":
            return completed
        case 'active':
            return active
    }
})
</script>